/*
 * @Description: 基本信息配置
 * @Author: Zzt
 * @Date: 2022-11-05 16:53:23
 * @LastEditTime: 2023-01-30 15:51:44
 */
import { fetchATListByFondId } from '@/api/archivesType';
import { fetchFondsListByUnitId } from '@/api/fonds';
import { IArchiveType } from '@/interfaces/archiveType';
import { IFond } from '@/interfaces/fond';
import { appState } from '@/store/mobx';
import { Form, Input, Select, Space } from 'antd';
import { useEffect, useState } from 'react';

const BaseTAT = (props: any) => {
  const { form } = props;
  // 全宗列表
  const [fondsList, setFondsList] = useState([]);
  // 档案类型列表
  const [ATList, setATList] = useState<IArchiveType[]>([]);
  // 加载时获取全宗列表，获取成功后默认选中第一条并把第一条返回出去
  useEffect(() => {
    const selectUnit = appState.unitId;
    if (selectUnit) {
      fetchFondsListByUnitId(selectUnit).then((res) => {
        const _fondList: IFond[] = res.data;
        setFondsList(_fondList);
        console.log('1111', _fondList[0].id);
        form.setFieldsValue({ description: _fondList[0].id });
      });
    }
  }, [appState.unitId]);
  const description = Form.useWatch('description', form);
  // 切换全宗自动加载档案类型
  useEffect(() => {
    if (description) {
      fetchATListByFondId(description).then((res) => {
        const _atList: IArchiveType[] = res.data;
        console.log(_atList);
        setATList(_atList);
        console.log('2222', _atList[0]?.id);
        form.setFieldsValue({ type: _atList[0]?.id });
      });
    }
  }, [description]);
  return (
    <>
      <Form.Item label="映射关系名称" name="name">
        <Input placeholder="请填写映射关系名称"></Input>
      </Form.Item>
      <Form.Item label="全宗" name="description">
        <Select
          options={fondsList.map((item) => ({ label: item.fondName, value: item.id }))}
        ></Select>
      </Form.Item>
      <Form.Item label="档案类型">
        <Space align="baseline">
          源档案类型
          <Form.Item name="before">
            <Select
              style={{ width: 120 }}
              options={ATList.map((item) => ({ label: item.atName, value: item.id }))}
            />
          </Form.Item>
          与目标
          <Form.Item name="after">
            <Select
              style={{ width: 120 }}
              options={ATList.map((item) => ({ label: item.atName, value: item.id }))}
            />
          </Form.Item>
          之间的字段映射关系
        </Space>
      </Form.Item>
    </>
  );
};
export default BaseTAT;
